<template>
  <container>
    <!-- <currentPage @change-page="onChangePage"></currentPage> -->
    <!-- <GamePage></GamePage> -->
    <!-- <{{currentPage}}></{{currentPage}}> -->
    <component :is="currentPage" @change-page="onChangePage"></component>
  </container>
</template>

<script>
import StartPage from './pages/StartPage.vue'
import GamePage from './pages/GamePage.vue'
import EndPage from '@/pages/EndPage.vue'
import { computed, ref } from 'vue'

export default {
  name: 'App',
  components: {
    // StartPage,
    // GamePage
  },
  setup() {
    const currentPageName = ref('StartPage')

    const onChangePage = pageName => {
      currentPageName.value = pageName
    }

    const currentPage = computed(() => {
      if (currentPageName.value === 'StartPage') {
        return StartPage
      } else if (currentPageName.value === 'GamePage') {
        return GamePage
      } else if (currentPageName.value === 'EndPage') {
        return EndPage
      }
    })

    return {
      onChangePage,
      currentPage
    }
  }
}
</script>


<style></style>
